<template>
  <footer class="my-2">
      <el-row justify="center" class="center">
      <el-col :span="13">
        <template v-for="(item,index) in data.nav" :key="index">
          <router-link :to="item.path" class="px-2">{{ item.title }}</router-link>
          <el-divider direction="vertical" v-if="index!=data.nav.length-1"/>
        </template>
      </el-col>
    </el-row>
    <p class="mt-2 center gray">Copyright &copy;2022-2024 国货之光有限公司版权所有</p>
  </footer>
</template>

<script setup>
import { reactive,onMounted,getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()  //获取当前实例的代理对象proxy
const data = reactive({
  nav:[]
})

//得到尾部导航
let getNav = ()=>{          
  proxy.$http({                 
    method:"get",               
    url:"./data/footer-nav.json"
  }).then(res=>{
    data.nav = res.data
  })
}

onMounted(()=>{
  getNav()                //获取导航数据 
})
</script>

<style scoped>

</style>